<template>
    <div class="novel">
        <!--头部 -->
     <div class="header">
      <div class="containor">
        <div class="name" @click="$router.go(-1)">书程小驿</div>
        
        <ul class="category">
          <li v-for="(category, index) in categories" :key="index">
            {{ category.name }}
          </li>
        </ul>
        <div class="telephone">
          <img
            src="http://47.109.18.97/images/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <span>联系我们</span>
        </div>
      </div>
    </div>
    <!-- 轮播图区域 -->
    <div class="swipper">
      <el-carousel height="470px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>

      </el-carousel>
    </div>
     <el-divider></el-divider>
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  全部分类
</el-button>
<el-drawer
  title="全部分类"
  :visible.sync="drawer"
  :direction="direction"
  :before-close=true>
  <span><h2>玄幻</h2><el-divider></el-divider><br><h2>武侠</h2><el-divider></el-divider><br><h2>科幻</h2><el-divider></el-divider><br<h2>都市</h2>
  <el-divider></el-divider><br><h2>架空</h2><el-divider></el-divider><br><h2>历史</h2><el-divider></el-divider><br><h2>仙侠</h2><el-divider></el-divider>
  <br><h2>军事</h2><el-divider></el-divider><br><h2>游戏</h2><el-divider></el-divider><br><h2>悬疑</h2><el-divider></el-divider><br><h2>女生</h2><el-divider></el-divider></span>
</el-drawer>
    <h1>男生精选</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://47.109.18.97/images/xm.jpg"  width="200" height="300" /> </td>
    <td align="center"><img src="http://47.109.18.97/images/msj.jpg" width="200" height="300" /></td>
    <td align="center"><img src="http://47.109.18.97/images/sx.jpg" width="200" height="300" /></td>
    <td align="center"><img src="http://47.109.18.97/images/gmzz.jpg" width="200" height="300" /></td>
    <td align="center"><img src="http://47.109.18.97/images/chyks.jpg" width="200" height="300" /></td>
    
  
  </tr>
  <tr>
    <td align="center"><a href="https://read.qidian.com/chapter/Bo4cJRb-5zhY1sEsPcaxkg2/LH6CZhsVBjDgn4SMoDUcDQ2/"><h1>星门</h1></a><br>老鹰吃小鸡 著<el-rate
  v-model="value"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="5684" class="item">
  <el-button size="small">评论</el-button>
</el-badge><el-collapse >
  <el-collapse-item title="简介" name="1">
    <div>传说，在那古老的星空深处<br>伫立着一道血与火侵染的红色之门<br>传奇与神话，黑暗与光明<br>无尽传说皆在这古老的门户中流淌<br>俯瞰星门,热血照耀天地，<br>黑暗终将离去！</div>
  </el-collapse-item>
  </el-collapse>
  </td>
    <td align="center"><a href="https://read.qidian.com/chapter/rCo0cx0UxW08kjk6dUsm_A2/j5xtNOEEJvq2uJcMpdsVgA2/"><h1>牧神记</h1></a><br>宅猪 著<el-rate
  v-model="value1"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="1200" class="item">
  <el-button size="small">评论</el-button>
</el-badge><el-collapse >
  <el-collapse-item title="简介" name="1">
    <div>大墟的祖训说，天黑，别出门。<br>大墟残老村的老弱病残们从江边捡到了一个婴儿，<br>取名秦牧，含辛茹苦将他养大。<br>这一天夜幕降临，黑暗笼罩大墟，<br>秦牧走出了家门……<br>做个春风中荡漾的反派吧！
<br>瞎子对他说。
　　<br>秦牧的反派之路，正在崛起！</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><a href="https://read.qidian.com/chapter/_AaqI-dPJJ4uTkiRw_sFYA2/-doT6biEpYlOBDFlr9quQA2/"><h1>圣墟</h1></a><br>辰东 著<el-rate
  v-model="value2"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="9542" class="item">
  <el-button size="small">评论</el-button>
</el-badge><el-collapse >
  <el-collapse-item title="简介" name="1">
    <div>在破败中崛起，在寂灭中复苏。<br>沧海成尘，雷电枯竭，<br>那一缕幽雾又一次临近大地，<br>世间的枷锁被打开了，<br>一个全新的世界就此揭开神秘的一角……</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><a href="https://read.qidian.com/chapter/3Q__bQt6cZEVDwQbBL_r1g2/GSlTBhSdiqP4p8iEw--PPw2/"><h1>诡秘之主</h1></a>爱潜水的乌贼 著<el-rate
  v-model="value3"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="9999" class="item">
  <el-button size="small">评论</el-button>
</el-badge><el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>蒸汽与机械的浪潮中，谁能触及非凡？<br>历史和黑暗的迷雾里，又是谁在耳语？<br>我从诡秘中醒来，睁眼看见这个世界：<br>枪械，大炮，巨舰，飞空艇，差分机；<br>魔药，占卜，诅咒，倒吊人，封印物……光明依旧照耀，<br>神秘从未远离，这是一段“愚者”的传说。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><a href="https://read.qidian.com/chapter/EECQFuYaOdYlePy7xMLiNw2/Bm_gHo7IXXhOBDFlr9quQA2/"><h1>从红月开始</h1></a>黑山老鬼 著<el-rate
  v-model="value4"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="7624" class="item">
  <el-button size="small">评论</el-button>
</el-badge><el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>红月亮出现在天上的那一刻开始，<br>全世界的人都成了疯子。<br>除了我！</div>
  </el-collapse-item>
  </el-collapse></td>
  </tr>
</table>
        </div>
        <el-divider></el-divider>
<h1>女生精选</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://47.109.18.97/images/lj.jpg" width="200" height="300" /> </td>
    <td align="center"><img src="http://47.109.18.97/images/mt.jpg" width="200" height="300" /></td>
    <td align="center"><img src="http://47.109.18.97/images/nd.jpg" width="200" height="300" /></td>
    <td align="center"><img src="http://47.109.18.97/images/tx.jpg"width="200" height="300" /></td>
    <td align="center"><img src="http://47.109.18.97/images/ynv.jpg" width="200" height="300" /></td>
    
  </tr>
  <tr>
    <td align="center"><a href="https://read.qidian.com/chapter/CrJoTrmF5TVtl3KA8Mw5oQ2/D4A_2KYCPCfwrjbX3WA1AA2/"><h1>农家小福女</h1></a><br>郁雨竹 著<el-rate
  v-model="value5"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="941" class="item">
  <el-button size="small">评论</el-button>

</el-badge><el-collapse >
  <el-collapse-item title="简介" name="1">
    <div>周家的四哥赌输了钱，母亲病重，<br>赌场的人还想让满宝卖身偿债。<br>村里人都说周家的宝贝疙瘩好日子到头了，<br>老娘也握着满宝的小手哭唧唧。<br>满宝却手握系统，带着兄弟嫂子们开荒，种地，<br>种药材，开铺子……日子越过越好，<br>嫂子们却开始忧心满宝的婚事。<br>满宝抿嘴一笑：“我早就想好了，<br>就选被我从小揍到大的竹马白善宝。”</div>
  </el-collapse-item>
  </el-collapse>
  </td>
    <td align="center"><a href="https://read.qidian.com/chapter/ofuf4CVSudn-JlVC31J8Aw2/5Yih6q7IzT_M5j8_3RRvhw2/"><h1>明天也喜欢</h1></a><br>叶非爷 著<el-rate
  v-model="value6"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="1284" class="item">
  <el-button size="small">评论</el-button>
</el-badge><el-collapse >
  <el-collapse-item title="简介" name="1">
    <div>陆惊宴第一次遇见盛羡，脑海里冒出一个念头：<br>想让这个男人哭。后来，陆惊宴哭了。<br>陆惊宴第一次遇见盛羡是在酒吧里，她手机没信号，<br>找他借网，问他手机热点WiFi 是什么？
<br>他说：你生日。<br>
陆惊宴还没来得及输入密码就被朋友喊走了。<br>
她觉得盛羡用自己的生日做密码，一定是喜欢她的，<br>就是闷骚了点，她明里暗里勾搭了盛羡大半年，<br>她才发现盛羡的WiFi密码是：nishengri
<br>明艳千金大小姐X法学院最年轻教授
<br>甜文。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><a href="https://read.qidian.com/chapter/apEdzEHMYNLVl9ByXxZ_TQ2/9XSzlTGHNm_M5j8_3RRvhw2/"><h1>你的来电</h1></a>叶非夜 著<el-rate
  v-model="value7"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="9546" class="item">
  <el-button size="small">评论</el-button>
</el-badge><el-collapse >
  <el-collapse-item title="简介" name="1">
    <div>林京是个小画家。
<br>业余兴趣是画KPL第一打野盛况和其他职业选手的亲密图。
<br>那些图有个共同的特点，盛况永远都是下面的那一位。
<br>画着画着，林京把自己画火了，火到了盛况面前。
<br>然后，那些图的画面在现实中盛况拉着林京都体会了一遍，<br>只不过林京是画里的盛况……</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><a href="https://read.qidian.com/chapter/2M0eB6gam8ZRGoWu-UQg7Q2/B2Us0jRk7qdMs5iq0oQwLQ2/"><h1>退下，让朕来</h1></a>油爆香菇 著<el-rate
  v-model="value8"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="8642" class="item">
  <el-button size="small">评论</el-button>
</el-badge><el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>沈棠在发配路上醒来，发现这个世界很不科学。
<br>天降神石，百国相争。
<br>文凝文心，出口成真。
<br>武聚武胆，劈山断海。
<br>她以为的小白脸，一句“横枪跃马”，<br>下一秒甲胄附身，长枪在手，一人成军，<br>千军万马能杀个七进七出！
<br>她眼里的痨病鬼，口念“星罗棋布”，<br>苍天如圆盖，陆地似棋局，排兵布阵，信手拈来！
<br>这TM都不能算不科学了！
<br>分明是科学的棺材板被神学钉死了！
<br>而她——
<br>“主公，北郡大旱，您要不哭一哭？”
<br>沈棠：“……”
<br>“主公，南州洪涝，您要不多笑笑？”
<br>沈棠：“……”</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><a href="https://read.qidian.com/chapter/LJ22qMWMP8twy7E0qeXDZQ2/v2WeIRQ7x0Hgn4SMoDUcDQ2/"><h1>妖女乱国</h1></a>樊笼也自然 著<el-rate
  v-model="value9"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate><el-badge :value="4682" class="item">
  <el-button size="small">评论</el-button>
</el-badge><el-collapse >
  <el-collapse-item title="简介" name="1">
    <div>在南北朝的乱世中，<br>她从一个强大却有些狂妄的女孩渐渐成为真正的<br>“无冕之王”。<br>
生为达者，兼济天下成了她唯一的枷锁。</div>
  </el-collapse-item>
  </el-collapse></td>
  </tr>
</table>
        </div>
</div>

</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
         categories: [],
          carousel: [],
         drawer: false,
        direction: 'rtl',
          value: 4.7,
           value1: 4.8,
            value2: 4.5,
             value3: 4.4,
              value4: 5.0,
              value5: 4.8,
               value6: 4.5,
                value7: 3.5,
                 value8: 3.6,
                  value9: 3.8,

    };
    },
    methods: {

    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    },
    created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
    this.findAllCarousel();
    },
    
};
</script>
<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.center{
 cursor: pointer;   
}
</style>
